<template>
    <div>
        <el-form :inline="true" label-width="90px">
            <draggable :list="list" ghost-class="ghost" chosen-class="chosenClass" animation="300" @end="onEnd">
                <template #item="{ element }">
                    <el-form-item :label="element.name" class="item" >
                        <el-input v-if="element.type == 'text'" :style="element.style" v-model="element.form"
                            :placeholder="element.placeholder"></el-input>
                        <el-select v-if="element.type == 'select'" :placeholder="element.placeholder" :style="element.style"
                            v-model="element.form">
                            <el-option v-for="(option, idx) in element.options" :key="idx" :label="option.label"
                                :value="option.value">
                            </el-option>
                        </el-select>
                        <el-date-picker v-if="element.type == 'datetime'" :placeholder="element.placeholder"
                            :style="element.style" v-model="element.form"></el-date-picker>
                    </el-form-item>
                </template>
            </draggable>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import draggable from "vuedraggable";
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const list = ref([]);

const props = defineProps(['list'])

//拖拽结束的事件
const onEnd = () => {
    localStorage.setItem('INPUT',JSON.stringify(list.value))
};

onMounted(() => {
    list.value = JSON.parse(localStorage.getItem('INPUT') as string) || props.list
})

</script>

<style lang="scss" scoped>

.item:hover {
    cursor: move;
}

.ghost {
    border: solid 1px #f1f1f1;
}

.chosenClass {
    background-color: #f1f1f1;
}
</style>